<template>
  <div>{{this.$store.state.CityHook.city}}</div>
  <button v-for="item of hots" :key="item" @click="handleCity(item)">{{item}}</button>
</template>

<script>
import {reactive, toRefs} from '@vue/reactivity'
import {mapMutations} from 'vuex'
export default {
    setup(){
        const state = reactive({
            hots:["上海","杭州","西安","洛阳"],
            /* changeCity(val){
                this.$store.commit("changeCity",val)
            } */
            ...mapMutations(["changeCity"]),
            handleCity(city){
                this.changeCity(city)
                this.$router.back()
            }
        })
        const refState = toRefs(state);
        return{
            ...refState
        }

    }
}
</script>

<style>

</style>